<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ftm" uri="http://java.sun.com/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客户信息</title>
    <!--引入bootStrap-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="../../../static/js/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        * {
            margin:0;
            padding:0;
        }
        button,input {
            outline:none;
        }
        button,.login {
            width:120px;
            height:42px;
            background:#f40;
            color:#fff;
            border:none;
            border-radius:6px;
            display:block;
            margin:20px auto;
            cursor:pointer;
        }
        .popOutBg {
            width:100%;
            height:100%;
            position:fixed;
            left:0;
            top:0;
            background:rgba(0,0,0,.6);
            display:none;
        }
        .popOut {
            position:fixed;
            width:600px;
            height:400px;
            top:50%;
            left:50%;
            margin-top:-200px;
            margin-left:-300px;
            background:#fff;
            border-radius:8px;
            overflow:hidden;
            display:none;
        }
        .popOut > span {
            position:absolute;
            right:10px;
            top:0;
            height:42px;
            line-height:42px;
            color:#000;
            font-size:30px;
            cursor:pointer;
        }
        .popOut table {
            display:block;
            margin:42px auto 0;
            width:520px;
        }
        .popOut caption {
            width:520px;
            text-align:center;
            color:#f40;
            font-size:18px;
            line-height:42px;
        }
        .popOut table tr td {
            color:#666;
            padding:6px;
            font-size:14px;
        }
        .popOut table tr td:first-child {
            text-align:right;
        }
        .inp {
            width:280px;
            height:30px;
            line-height:30px;
            border:1px solid #999;
            padding:5px 10px;
            color:#000;
            font-size:14px;
            border-radius:6px;
        }
        .inp:focus {
            border-color:#f40;
        }
        @keyframes ani {
            from {
                transform:translateX(-100%) rotate(-60deg) scale(.5);
            }
            50% {
                transform:translateX(0) rotate(0) scale(1);
            }
            90% {
                transform:translateX(20px) rotate(0) scale(.8);
            }
            to {
                transform:translateX(0) rotate(0) scale(1);
            }
        }.ani {
             animation:ani .5s ease-in-out;
         }
        #btn_add{
            float: left;
        }

    </style>
</head>
<body>
<div class="container">
        <div class="panel panel-primary">                      <!--物品信息和服务信息填写-->
            <div class="panel-heading">
                <h3 class="panel-title"><span class="glyphicon glyphicon-user"></span>  客户基本信息</h3>
            </div>
            <table class="table">
                <thead>
                <tr>
                    <th>客户ID</th>
                    <th>客户姓名</th>
                    <th>客户地址</th>
                    <th>客户电话</th>
                    <th>客户邮箱</th>

                </tr>
                </thead>
                <tbody>
                <c:forEach var="clientVar" items="${clientList}">
                    <tr>
                        <td>${clientVar.clientId}</td>
                        <td>${clientVar.clientName}</td>
                        <td>${clientVar.clientAddress}</td>
                        <td>${clientVar.clientTel}</td>
                        <td>${clientVar.clientEmail}</td>

                        <td>
                            <a href="${pageContext.request.contextPath}/client/delClient/${clientVar.clientId}">删除</a>
                            <a href="${pageContext.request.contextPath}/client/toUpdateClient/${clientVar.clientId}">修改</a>
                        </td>
                    </tr>

                </c:forEach>
                </tbody>
            </table>
        </div>
</div>
<div><button id="btn_add" type="button">新增客户</button>
<div class="popOutBg"></div>
<div class="popOut">
    <span title="关闭"> x </span>
    <form action="${pageContext.request.contextPath}/client/addClient" method="post">
        <table>
            <caption>欢迎</caption>
            <tbody>
            <tr>
                <td width="120">客户姓名：</td>
                <td><input type="text" class="inp" placeholder="请输入客户姓名" name="clientName"  required></td>
            </tr>
            <tr>
                <td width="120">客户住址：</td>
                <td><input type="text" class="inp" placeholder="请输入客户住址" name="clientAddress"  required></td>
            </tr>
            <tr>
                <td width="120">客户电话：</td>
                <td><input type="text" class="inp" placeholder="请输入客户电话" name="clientTel" required></td>
            </tr>
            <tr>
                <td width="120">客户邮箱：</td>
                <td><input type="text" class="inp" placeholder="请输入客户邮箱" name="clientEmail"  required></td>
            </tr>

            <tr>
                <td colspan="2"><input type="submit" class="login" value="添加"></td>
            </tr>
            </tbody></table>
    </form>

</div>

<script>
    function $(param) {
        if (arguments[1] == true) {
            return document.querySelectorAll(param);
        } else {
            return document.querySelector(param);
        }
    }

    function ani() {
        $(".popOut").className = "popOut ani";
    }
    $("button").onclick = function() {
        $(".popOut").style.display = "block";
        ani();
        $(".popOutBg").style.display = "block";
    };
    $(".popOut > span").onclick = function() {
        $(".popOut").style.display = "none";
        $(".popOutBg").style.display = "none";
    };
    $(".popOutBg").onclick = function() {
        $(".popOut").style.display = "none";
        $(".popOutBg").style.display = "none";
    };
</script>
</body>
</html>
